<template>
  <div class="main">
    <div class="container">
      <div class="container-top">
        <div class="top">
          <div class="title">个人信息维护</div>
        </div>
        <div class="userinfo">
          <p class="account">
            账号：<el-input
              v-model="accountValue"
              class="accountInput"
              disabled
            ></el-input>
          </p>
          <p class="modify-pass" @click="onModifyPass">【修改密码】</p>
        </div>
      </div>
      <div class="content" v-if="usertype === 'experts-admin'">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="姓名">
            <el-input
              v-model="form.real_name"
              class="common"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="form.sex" placeholder="请选择" class="common">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机">
            <el-input
              v-model="form.phone"
              class="common"
              placeholder="单行输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属单位">
            <el-input
              v-model="form.unit_name"
              class="common"
              placeholder="单行输入"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="单位职称">
            <el-input
              v-model="form.zhicheng"
              class="common"
              placeholder="单行输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="专家领域">
            <el-input
              v-model="form.lingyu"
              class="common"
              placeholder="单行输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="头像">
            <el-upload
              class="upload-demo"
              ref="upload"
              :action="
                'http://sapi.ps.cqooc.com/unit/attach/upload?token=' + token
              "
              :on-change="handleChange"
              :on-success="handleSuccess"
              :file-list="fileList"
              list-type="picture"
              name="files"
              :auto-upload="true"
            >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-circle-plus"
                class="uploadBtn"
                >选择文件</el-button
              >
              <div slot="tip" class="el-upload__tip">未选择任何文件</div>
              <div slot="file" slot-scope="{ file }" class="preview">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="
                    file.url.indexOf('http') === -1
                      ? 'http://sapi.ps.cqooc.com/upload' + file.url
                      : file.url
                  "
                  alt=""
                />
                <div class="preview-btn">
                  <div
                    class="look"
                    @click="handlePictureCardPreview(file, fileList)"
                  >
                    <img src="@/assets/images/look.png" alt="" />
                  </div>
                  <div class="del" @click="handleRemove(file)">
                    <img src="@/assets/images/del.png" alt="" />
                  </div>
                </div>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item class="button">
            <el-button
              type="primary"
              @click="onExpertsSubmit"
              icon="iconfont icon-baocun_mian"
              class="save"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="content" v-else-if="usertype === 'declare-user'">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="姓名">
            <el-input
              v-model="form.real_name"
              class="common"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="form.sex" placeholder="请选择" class="common">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机">
            <el-input
              v-model="form.phone"
              class="common"
              placeholder="单行输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属单位">
            <el-input
              v-model="form.unit_name"
              class="common"
              placeholder="单行输入"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="院系/部门">
            <el-input
              v-model="form.yx_name"
              class="common"
              placeholder="单行输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="头像">
            <el-upload
              class="upload-demo"
              ref="upload"
              name="files"
              :action="
                'http://sapi.ps.cqooc.com/unit/attach/upload?token=' + token
              "
              :on-change="handleChange"
              :on-success="handleSuccess"
              :file-list="fileList"
              list-type="picture"
              :auto-upload="true"
            >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-circle-plus"
                class="uploadBtn"
                >选择文件</el-button
              >
              <div slot="tip" class="el-upload__tip">未选择任何文件</div>
              <div slot="file" slot-scope="{ file }" class="preview">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="
                    file.url.indexOf('http') === -1
                      ? 'http://sapi.ps.cqooc.com/upload' + file.url
                      : file.url
                  "
                  alt=""
                />
                <div class="preview-btn">
                  <div
                    class="look"
                    @click="handlePictureCardPreview(file, fileList)"
                  >
                    <img src="@/assets/images/look.png" alt="" />
                  </div>
                  <div class="del" @click="handleRemove(file)">
                    <img src="@/assets/images/del.png" alt="" />
                  </div>
                </div>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item class="button">
            <el-button
              type="primary"
              @click="onDeclareSubmit('form')"
              icon="iconfont icon-baocun_mian"
              class="save"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="content" v-else>
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="姓名">
            <el-input v-model="form.real_name" class="common"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="form.sex" placeholder="请选择" class="common">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机">
            <el-input
              v-model="form.phone"
              class="common"
              placeholder="单行输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属单位">
            <el-input
              v-model="form.unit_name"
              class="common"
              placeholder="单行输入"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="院系/部门">
            <el-input
              v-model="form.yx_name"
              class="common"
              placeholder="单行输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="头像">
            <el-upload
              class="upload-demo"
              ref="upload"
              :action="
                'http://sapi.ps.cqooc.com/unit/attach/upload?token=' + token
              "
              :on-change="handleChange"
              :on-success="handleSuccess"
              :file-list="fileList"
              list-type="picture"
              name="files"
              :auto-upload="true"
            >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-circle-plus"
                class="uploadBtn"
                >选择文件</el-button
              >
              <div slot="tip" class="el-upload__tip">未选择任何文件</div>
              <div slot="file" slot-scope="{ file }" class="preview">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="
                    file.url.indexOf('http') === -1
                      ? 'http://sapi.ps.cqooc.com/upload' + file.url
                      : file.url
                  "
                  alt=""
                />
                <div class="preview-btn">
                  <div
                    class="look"
                    @click="handlePictureCardPreview(file, fileList)"
                  >
                    <img src="@/assets/images/look.png" alt="" />
                  </div>
                  <div class="del" @click="handleRemove(file)">
                    <img src="@/assets/images/del.png" alt="" />
                  </div>
                </div>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item class="button">
            <el-button
              type="primary"
              @click="onSchoolSubmit"
              icon="iconfont icon-baocun_mian"
              class="save"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { UserInfo, UserEdit, ExpertEdit, SchoolEdit } from "@/api/login";

export default {
  name: "Modify",
  data() {
    return {
      Showbg: false,
      accountValue: "",
      form: {},
      dialogImageUrl: "",
      dialogVisible: false,
      userid: "",
      imgUrl: "",
      token: "",
      fileList: [],
      usertype: "",
    };
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = "http://sapi.ps.cqooc.com/upload" + file.url;
      this.dialogVisible = true;
    },
    handleRemove(file) {
      this.fileList = [];
      this.imgUrl = "";
    },
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]];
      }
    },
    // 获取用户信息
    queryUserInfo() {
      UserInfo({
        token: this.token,
      }).then((result) => {
        const { data } = result;
        this.form = data;
        // console.log(data);
        this.accountValue = data.user_name;
        const obj = {};
        obj["url"] = data.avatar;
        this.fileList.push(obj);
        this.imgUrl = data.avatar;
        if (data.user_type === "1") {
          this.usertype === "school-admin";
        } else if (data.user_type === "2") {
          this.usertype = "declare-user";
        } else if (data.user_type === "3") {
          this.usertype = "experts-admin";
        }
      });
    },
    handleSuccess(response) {
      this.fileList[0].url = response.url;
      this.imgUrl = response.url;
    },
    // 专家用户
    onExpertsSubmit() {
      ExpertEdit({
        token: this.token,
        real_name: this.form.real_name,
        sex: this.form.sex,
        phone: this.form.phone,
        lingyu: this.form.lingyu,
        zhicheng: this.form.zhicheng,
        avatar: this.imgUrl,
      }).then((result) => {
        if (result.code === 1) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.$router.go(-1);
        }
      });
    },
    onSchoolSubmit() {
      SchoolEdit({
        token: this.token,
        real_name: this.form.real_name,
        sex: this.form.sex,
        phone: this.form.phone,
        yx_name: this.form.yx_name,
        avatar: this.imgUrl,
      }).then((result) => {
        if (result.code === 1) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.$router.go(-1);
        }
      });
    },
    // 提交信息
    onDeclareSubmit() {
      UserEdit({
        token: this.token,
        real_name: this.form.real_name,
        yx_name: this.form.yx_name,
        sex: this.form.sex,
        phone: this.form.phone,
        avatar: this.imgUrl,
      }).then((result) => {
        if (result.code === 1) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.$router.go(-1);
        }
      });
    },
    onModifyPass() {
      this.$router.push({
        path: "/modify-pass",
        query: {
          userid: this.userid,
        },
      });
    },
    backgroundShow() {
      this.$emit("backgroundShow", this.Showbg);
    },
  },
  created() {
    this.backgroundShow();
  },
  mounted() {
    const token = sessionStorage.getItem("token");
    const userid = this.$route.query.userid;
    this.token = token;
    this.userid = userid;
    this.queryUserInfo();
  },
};
</script>
<style lang='scss' scoped>
.main {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
  color: #242748;
  margin: 0 auto;
  position: relative;
  font-size: 18px;
  margin: 0 50px 20px 30px;
  text-align: left;
  font-family: "PingFang";
  .container {
    width: 100%;
    height: 925px;
    padding-bottom: 30px;
    background-color: #fff;
    border-radius: 10px;
    .container-top {
      .top {
        display: flex;
        margin-bottom: 30px;
        .title {
          font-size: 26px;
          font-family: "黑体";
          color: #5673ff;
          margin-right: 60px;
        }
      }
      .userinfo {
        display: flex;
        align-items: center;
        .account {
          display: flex;
          align-items: center;
          font-weight: 700;
          .accountInput {
            width: 70%;
            height: 32px;
            line-height: 32px;
          }
          /deep/.el-input__inner {
            height: 100%;
            line-height: 0;
            color: #5673ff;
            font-size: 15px;
            letter-spacing: 1px;
            background-color: #f8f9fe;
            border: solid 1px #f1f2f4;
          }
        }
        .modify-pass {
          color: #5673ff;
          font-size: 16px;
          cursor: pointer;
        }
      }
    }
    .container-top {
      padding: 33px 45px 25px;
      border-bottom: solid 1px #e7e9eb;
    }
    .content {
      padding: 40px;
      height: 820px;
      overflow-y: auto;
      & > form {
        /deep/.el-form-item,
        & > p {
          margin-bottom: 38px;
          font-weight: 700;
          .join {
            font-size: 18px;
            color: #2197fd;
            margin-left: 30px;
            i {
              margin-right: 10px;
            }
          }
        }
        // 单选按钮样式
        /deep/.el-radio {
          margin-right: 50px;
        }
        /deep/.el-radio__inner {
          width: 20px;
          height: 20px;
        }
        /deep/.el-radio__input.is-checked .el-radio__inner {
          border-color: #6b84fb;
          background: none;
        }
        /deep/.el-radio__inner::after {
          width: 14px;
          height: 14px;
          background-color: #6b84fb;
        }
        /deep/.el-radio__label {
          font-size: 18px;
          color: #828b98;
        }
        // 多选按钮样式
        /deep/.el-checkbox {
          margin-right: 60px;
        }
        /deep/.el-checkbox__inner {
          width: 20px;
          height: 20px;
        }
        /deep/.el-checkbox__inner::after {
          width: 5px;
          height: 10px;
          left: 6px;
          border-color: #5a73ff;
        }
        /deep/.el-checkbox__label {
          color: #9d9fa2;
          font-size: 18px;
        }
        /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
          color: #9d9fa2;
        }
        /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
        /deep/.el-checkbox__input.is-indeterminate /deep/.el-checkbox__inner {
          background-color: transparent;
          border-color: #5a73ff;
        }
        /deep/.el-input__prefix {
          left: 85%;
          width: 23px;
          height: 23px;
        }
        /deep/.el-input__icon {
          font-size: 20px;
          color: #271d1a;
        }
        /deep/.el-input__inner {
          font-size: 18px;
          color: #9d9fa2;
          font-family: "PingFang";
        }
        /deep/.el-textarea__inner,
        .commitment {
          width: 80%;
        }
        /deep/.el-textarea__inner {
          height: 270px;
          resize: none;
          &::placeholder {
            font-size: 18px;
            font-family: "PingFang";
          }
        }
        /deep/.el-form-item__label {
          text-align: left;
          color: #242748;
          font-size: 18px;
          font-weight: 700;
        }
        /deep/.button .el-form-item__content {
          margin-left: 0 !important;
        }
        /deep/.el-upload {
          float: left;
        }
        /deep/.el-upload__tip {
          font-size: 18px !important;
          color: #242748 !important;
        }
        /deep/ul.el-upload-list.el-upload-list--picture {
          width: 25%;
        }
        /deep/.el-upload-list--picture .el-upload-list__item {
          height: 70px;
          line-height: 70px;
          background-color: #f4f7fc;
          border: none;
        }
        /deep/.el-upload-list--picture .el-upload-list__item-thumbnail {
          width: 50px;
          height: 50px;
          margin-left: -70px;
        }
        /deep/.el-upload-list--picture
          .el-upload-list__item.is-success
          .el-upload-list__item-name {
          line-height: 48px;
          color: #242748;
          font-size: 14px;
          font-weight: 700;
        }
      }
      .common {
        width: calc(100% - 40%);
        /deep/.el-input__prefix {
          left: 95%;
        }
        /deep/.el-input__inner {
          padding-left: 25px;
        }
      }
      .main-members {
        .el-input {
          width: 11%;
          margin-right: 25px;
          /deep/.el-input__inner {
            padding-left: 25px;
          }
          &:last-of-type {
            margin-right: 0;
          }
        }
      }
      .commitment {
        border: solid 1px #e7e9eb;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 18px;
        color: #242748;
        & > p {
          margin-bottom: 50px;
          font-weight: 700;
        }
        & > div {
          display: flex;
          font-weight: 700;
          /deep/.el-input__inner {
            padding: 0 20px;
          }
        }
        /deep/.el-form-item__label {
          width: 70px !important;
        }
        /deep/.el-form-item__content {
          margin-left: 70px !important;
        }
        .signature {
          display: flex;
          margin-right: 120px;
          p {
            font-weight: 700;
          }
          button {
            margin-right: 20px;
          }
        }
        .esigns {
          width: 240px;
          height: 135px;
          background-color: #f1f3fd;
          & > canvas {
            width: 100% !important;
            height: 98% !important;
          }
        }
      }
      .file {
        display: flex;
        font-size: 18px;
        margin-bottom: 20px;
        & > p {
          margin-right: 40px;
          font-weight: 700;
        }
        /deep/.upload-demo {
          height: 50px;
        }
        /deep/.el-upload__tip {
          float: left;
          margin-top: 0;
          font-weight: 700;
        }
      }
      .uploadBtn {
        padding: 7px 12px 7px 10px;
        margin-right: 10px;
        background-color: #e5eefe;
        border: solid 1px #c8e3fe;
        color: #2197fd;
        font-size: 14px;
        letter-spacing: 1px;
      }
      /deep/.el-icon-circle-plus {
        color: #2197fd;
        font-size: 16px;
      }
      .preview {
        display: flex;
        align-items: center;
        width: 100%;
        height: 50px;
        padding: 0 22px;
        background-color: #f4f7fc;
        border-radius: 5px;
        .details {
          width: 90%;
          margin: 0 0 0 20px;
          .title {
            width: 90%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #242748;
            font-size: 14px;
            font-weight: 700;
          }
          p {
            line-height: 20px;
            font-size: 12px;
            color: #a1a4b5;
            span {
              margin-right: 10px;
            }
          }
        }
        .preview-btn {
          position: absolute;
          right: 8%;
          height: 18px;
          display: flex;
          & > div {
            width: 18px;
            height: 18px;
            margin-left: 18px;
            img {
              display: block;
            }
          }
          .del {
            width: 16px;
          }
        }
      }
    }
  }
  .save {
    background-color: #5673ff;
    border: solid 1px #2d4eff;
    box-shadow: 0px 4px 15.52px 0.48px rgba(73, 100, 245, 0.39);
  }
  .save {
    padding: 8px 15px 8px 20px;
    font-size: 14px;
    font-family: "PingFang";
    letter-spacing: 1px;
    /deep/i,
    img {
      margin-right: 8px;
      font-size: 18px;
      vertical-align: middle;
    }
  }
}
</style>